<!--
 * @Description: 报表统计
 * @Author: 阳婷
 * @Date: 2021-03-22 10:24:42
 * @LastEditTime: 2023-02-28 15:08:31
 * @LastEditors: 阳婷
-->
<template>
    <div class='box-index'>
        <div class="topBox">
            <div class="dataBox">
                <div>总营业额</div>
                <div>{{reports.totalPrice}}</div>
            </div>
            <div class="dataBox">
                <div>总订单量</div>
                <div>{{reports.count}}</div>
            </div>
            <div class="dataBox">
                <div>当月营业额</div>
                <div>{{reports.onMonthPrice}}</div>
            </div>
            <div class="dataBox">
                <div>当月订单量</div>
                <div>{{reports.onMonthCount}}</div>
            </div>
        </div>
        <div class="chartBox">
            <div class="chartLeft">
                <div class="topTitle"> 营业统计 
                    <!-- <el-date-picker class="saleTime" size="small" v-model="saleTime" type="monthrange"
                        :shortcuts="shortcuts" value-format="YYYY-MM" :default-value="defaultTime" range-separator="至"
                        start-placeholder="开始月" end-placeholder="结束月" @change="getStatBymonth">  </el-date-picker>-->

                    <el-date-picker class="saleTime" size="small" value-format="YYYY-MM" v-model="saleTime"
                        :default-value="defaultTime" type="monthrange" unlink-panels range-separator="至"
                        start-placeholder="开始月" end-placeholder="结束月" @change="getStatBymonth(2)" />
                    <!-- <el-date-picker class="fliterMargin" size="small" v-model="saleTime" type="datetimerange"
                value-format="YYYY-MM-DD hh:mm:ss" :default-value="defaultTime" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" @change="getStatBymonth"> -->
                    <!-- </el-date-picker> -->
                </div>
                <bar-charts class="mainChart" v-model:modelValue="modelValue" ref="chartBar">
                </bar-charts>
            </div>
            <div class="chartRight">
                <div class="topTitle">近6个月销量前五的商品</div>
                <bar-charts class="mainChart" v-model:modelValue="modelValue2" ref="chartBar2">
                </bar-charts>
            </div>
        </div>
    </div>
</template>
<script>
    import {
        ref,
        reactive,
        toRefs,
        defineComponent,
        onMounted,
        getCurrentInstance
    } from "vue";
    import {
        parseTime
    } from "@/utils/index"
    import barCharts from './../../components/chart/barCharts.vue'
    export default defineComponent({
        setup(props) {
            const datas = reactive({
                saleTime: [],
                defaultTime: [],
                reports: {
                    totalPrice: "",
                    count: "",
                    onMonthPrice: '',
                    onMonthCount: "",
                    orderList: [],
                    revenue: [],
                    month: [],
                    productNames: [],
                    sales: []
                },
                modelValue: {
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b0}<br />{a0}: {c0}km<br />{a1}: {c1}h'

                    },
                    grid: {
                        top: "40px",
                        bottom: "40px",
                        right: "40px"
                    },
                    legend: {
                        data: ['订单量', '营业额']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                show: false
                            },
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ccc"
                                }
                            },
                            nameTextStyle: {
                                color: "#426a77"
                            },
                            axisLabel: {
                                color: "#426a77"
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '订单量',
                            axisLabel: {
                                formatter: '{value}',
                                color: "#426a77"
                            },
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ccc"
                                }
                            },
                            nameTextStyle: {
                                color: "#426a77"
                            }
                        },
                        {
                            type: 'value',
                            name: '营业额',
                            splitLine: {
                                show: false
                            },
                            axisLabel: {
                                formatter: '{value}元',
                                color: "#426a77"
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ccc"
                                }
                            },
                            nameTextStyle: {
                                color: "#426a77"
                            }
                        }
                    ],
                    series: [
                        {
                            name: '订单量',
                            type: 'bar',
                            data: [],
                            itemStyle: {
                                color: "#61DDA8"
                            }
                        },
                        {
                            name: '营业额',
                            type: 'bar',
                            yAxisIndex: 1,
                            data: [],
                            itemStyle: {
                                color: "#24B6DF"
                            }
                        }
                    ]
                },
                modelValue2: {
                    tooltip: {
                        trigger: 'axis',
                        // formatter: '{b0}<br />{a0}: {c0}km<br />{a1}: {c1}h'

                    },
                    grid: {
                        top: "40px",
                        bottom: "40px",
                        right: "10px"
                    },
                    legend: {
                        data: ['销量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisTick: {
                                show: false
                            },
                            axisPointer: {
                                type: 'shadow'
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ccc"
                                }
                            },
                            nameTextStyle: {
                                color: "#426a77"
                            },
                            axisLabel: {
                                color: "#426a77"
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '销量',
                            axisLabel: {
                                formatter: '{value}',
                                color: "#426a77"
                            },
                            splitLine: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: "#ccc"
                                }
                            },
                            nameTextStyle: {
                                color: "#426a77"
                            }
                        }
                    ],
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [],
                            itemStyle: {
                                color: "#61DDA8"
                            }
                        }
                    ]
                }
            })
            const { proxy } = getCurrentInstance();
            onMounted(() => {
                const day = new Date()
                const end = day.getFullYear() + "-" + (day.getMonth() + 1)
                const start = (day.getFullYear() - 1) + "-" + (day.getMonth() + 1)
                datas.defaultTime = [start, end]
                datas.saleTime = [parseTime(start), parseTime(end)]
                getData()
                getStatBymonth(1)
            });
            const chartBar = ref(null)
             const chartBar2 = ref(null)
            const getData = (val) => {
                
                proxy.$ajax('get', '/api/report/total', {}, (data) => {
                    datas.reports = data.data
                    datas.modelValue2.xAxis[0].data=data.data.productNames
                    datas.modelValue2.series[0].data=data.data.sales
                    proxy.chartBar2.refreshChart()
                })
            };
            const getStatBymonth = (type) => {
                var start = ""
                var end = ""
                if (type == 1) {
                    start = new Date(datas.saleTime[0]).getFullYear() + "-" + (new Date(datas.saleTime[0]).getMonth() + 1)
                    end = new Date(datas.saleTime[1]).getFullYear() + "-" + (new Date(datas.saleTime[1]).getMonth() + 1)
                } else {
                    start = datas.saleTime[0] ? datas.saleTime[0] : ""
                    end = datas.saleTime[1] ? datas.saleTime[1] : ""
                }
                
                proxy.$ajax('get', '/api/report/statBymonth', {
                    startMonth: start,
                    endMonth: end
                }, (data) => {
                    datas.modelValue.xAxis[0].data=data.data.month
                    datas.modelValue.series[0].data=data.data.orderList
                    datas.modelValue.series[1].data=data.data.revenue
                     proxy.chartBar.refreshChart()
                })
            }
            return { ...toRefs(datas),chartBar,chartBar2, getData, getStatBymonth }
        },
        components: {
            barCharts
        }
    })
</script>
<style>
    .topTitle .el-date-editor .el-range-separator {
        width: 8% !important;
    }
</style>
<style scoped>
    .topBox {
        width: 100%;
        height: 100px;
        margin: 60px 0;
    }

    .dataBox {
        color: #fff;
        font-size: 24px;
        text-align: center;
        width: 23%;
        height: 100px;
        background-color: #184e78;
        margin: 0 1%;
        padding: 10px;
        border-radius: 10px;
        display: inline-block;
    }

    .chartLeft {
        width: 60%;
        height: 600px;
        display: inline-block;
        vertical-align: top;
    }

    .chartRight {
        width: 39%;
        height: 600px;
        display: inline-block;
        vertical-align: top;
    }

    .topTitle {
        font-size: 24px;
        text-align: center;
        height: 40px;
    }

    .mainChart {
        width: 100%;
        height: 560px;
    }
</style>